<template>
    <el-card>
        <template #header>
            <div class="card-header">
                <span>管理员角色</span>
                <el-button @click="add" type="primary" plain>添加角色</el-button>
            </div>
        </template>
        <el-table :data="form" style="width: 100%">
            <el-table-column prop="id" label="#" width="180" />
            <el-table-column prop="name" label="角色" width="180" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button @click="edit(scope.row.id,scope.$index)" type="primary" size="small" plain>编辑</el-button>
                    <el-button @click="handleRemove(scope.row.id,scope.$index)" type="danger" size="small" plain>删除
                    </el-button>
                    <el-button @click="power" type="success" size="small" plain>权限</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
    <!-- 添加角色 -->
    <el-dialog v-model="dialogAddVisible" title="添加角色">
        <el-form :model="add_formName">
            <el-form-item label="角色名称">
                <el-input v-model="add_formName" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogAddVisible = false">取消</el-button>
                <el-button type="primary" @click="submitAdd">确定</el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 编辑角色 -->
    <el-dialog v-model="dialogEditVisible" title="编辑角色">
        <el-form :model="formName">
            <el-form-item label="角色名称">
                <el-input v-model="formName" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="submitEdit">确定</el-button>
                <el-button @click="dialogEditVisible = false">取消</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import role from '@/api/role';
// import { ElMessage } from 'element-plus';
import { ref } from 'vue';
let form = ref([])
let loadList = async () => {
    let { status, msg, data } = await role.list();
    if (status) {
        form.value = data;
    }
}
loadList()
let formId = ref();
let formIndex = ref()
let formName = ref();
let add_formName = ref();
let dialogAddVisible = ref(false);
let dialogEditVisible = ref(false);
let edit = (id, index) => {
    dialogEditVisible.value = true;
    formId.value = id;
    formIndex.value = index;
    formName.value = form.value[index].name;
}
let submitEdit = async () => {
    let { status, msg } = await role.update(formId.value, { name: formName.value });
    if (status) {
        form.value[formIndex.value].name = formName.value
        dialogEditVisible.value = false;
        ElMessage.success('修改成功');
    }
}
let add = () => {
    dialogAddVisible.value = true;
}
let submitAdd = async () => {
    let { status, msg } = await role.add({ name: add_formName.value });
    if (status) {
        form.value.push(add_formName.value);
    }
    loadList()
}
let handleRemove = async (id, index) => {
    let { status, msg } = await role.remove(id);
    if (status) {
        form.value.splice(index, 1);
    }
}
</script>
<style scoped>
.el-card {
    width: 600px;
}

.card-header {
    display: flex;
    justify-content: space-between;
}
</style>